<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="趋势图展示" name="first">
        <ve-line
          v-if="results.length > 0"
          :height="chartHeight"
          :data="chartData"
          :extend="chartExtend"
          :settings="chartSettings"
        />
        <el-empty v-else description="暂无任何记录" />
      </el-tab-pane>
      <el-tab-pane label="列表数据展示" name="second">
        <div class="ele-table-tool ele-table-tool-default">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
        </div>
        <el-table
          border
          stripe
          :data="results"
          :height="height"
          @row-dblclick="detail"
        >
          <el-table-column
            label="编号"
            width="80"
            align="center"
            type="index"
          />
          <el-table-column
            label="日期"
            prop="gdate"
            align="center"
            :formatter="formatter"
            width="120"
          />
          <el-table-column
            label="10cm最高(%)"
            prop="rows[0].val_max"
            align="center"
            width="110"
          />
          <el-table-column
            label="10cm最低(%)"
            prop="rows[0].val_min"
            align="center"
            width="110"
          />
          <el-table-column
            label="10cm平均(%)"
            prop="rows[0].val_avg"
            align="center"
            width="110"
          />
          <el-table-column
            label="30cm最高(%)"
            prop="rows[1].val_max"
            align="center"
            width="110"
          />
          <el-table-column
            label="30cm最低(%)"
            prop="rows[1].val_min"
            align="center"
            width="110"
          />
          <el-table-column
            label="30cm平均(%)"
            prop="rows[1].val_avg"
            align="center"
            width="110"
          />
          <el-table-column
            label="50cm最高(%)"
            prop="rows[2].val_max"
            align="center"
            width="110"
          />
          <el-table-column
            label="50cm最低(%)"
            prop="rows[2].val_min"
            align="center"
            width="110"
          />
          <el-table-column
            label="50cm平均(%)"
            prop="rows[2].val_avg"
            align="center"
            width="110"
          />
          <el-table-column
            label="70cm最高(%)"
            prop="rows[3].val_max"
            align="center"
            width="110"
          />
          <el-table-column
            label="70cm最低(%)"
            prop="rows[3].val_min"
            align="center"
            width="110"
          />
          <el-table-column
            label="70cm平均(%)"
            prop="rows[3].val_avg"
            align="center"
            width="110"
          />
          <el-table-column
            align="center"
            label="操作"
            width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" class="mr12" icon="el-icon-edit" @click="edit(scope.row)">修改</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import { formatterForTable } from '@/utils'
export default {
  props: {
    results: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      height: 'calc(100vh - 274px)',
      activeName: 'first',
      chartSettings: {},
      chartHeight: 'calc(100vh - 224px)',
      chartExtend: {
        series: {
          showSymbol: false
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '12%',
          containLabel: true
        }
      }
    }
  },
  computed: {
    chartData() {
      const fields = [
        { namekey: 'gdate', name: '日期' },
        { namekey: 'val1_avg', name: '10cm(%)' },
        { namekey: 'val2_avg', name: '30cm(%)' },
        { namekey: 'val3_avg', name: '50cm(%)' },
        { namekey: 'val4_avg', name: '70cm(%)' }
      ]

      const rows = []
      this.results.forEach((item, index) => {
        rows.push({
          '日期': item.gdate,
          '10cm最高(%)': item.rows[0].val_max || 0,
          '10cm最低(%)': item.rows[0].val_min || 0,
          '10cm(%)': item.rows[0].val_avg || 0,
          '30cm最高(%)': item.rows[1] && item.rows[1].val_max || 0,
          '30cm最低(%)': item.rows[1] && item.rows[1].val_min || 0,
          '30cm(%)': item.rows[1] && item.rows[1].val_avg || 0,
          '50cm最高(%)': item.rows[2] && item.rows[2].val_max || 0,
          '50cm最低(%)': item.rows[2] && item.rows[2].val_min || 0,
          '50cm(%)': item.rows[2] && item.rows[2].val_avg || 0,
          '70cm最高(%)': item.rows[3] && item.rows[3].val_max || 0,
          '70cm最低(%)': item.rows[3] && item.rows[3].val_min || 0,
          '70cm(%)': item.rows[3] && item.rows[3].val_avg || 0
        })
      })

      return {
        columns: fields.map(val => val.name),
        rows
      }
    }
  },
  methods: {
    add() {
      this.$emit('add')
    },
    detail(row) {
      this.$emit('detail', row)
    },
    edit(row) {
      this.$emit('edit', row)
    },
    formatter(row, column) {
      return formatterForTable(row, column)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

